<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>数据大屏</title>
    <link rel="stylesheet" href="/libs/datashow/css/style.css" />
    <script type="text/javascript" src="/libs/datashow/js/jquery-1.8.0.min.js"></script>
</head>
<body style="zoom:0.8">
<header>
    物联网平台数据统计
    <span id=localtime style=" font-size:14px; position: absolute; right: 30px; top:-20px; "></span>
</header>

<!-- content需要被vue接管 -->
<div id="content">
<!--    1.1 左侧-->
    <div class="content_left">
        <div class="dtuplc">
            <div class="dtu">
                <div id="container" style="height: 100%;"></div>
            </div>
            <div class="plc">
                <div id="container1" style="height: 100%"></div>
            </div>
        </div>
        <!--
            DTU和PLC完
        -->
        <div class="online">
            <div class="title"><img src="/libs/datashow/images/icon01.png" /> 环形图</div>
            <div class="online_con" id="container2">

            </div>
        </div>
        <div class="industry">
            <div class="title"><img src="/libs/datashow/images/icon02.png" /> 柱状图</div>
            <div class="industry_con" id="container3"></div>
        </div>
        <img src="../../libs/datashow/images/center02.png" height="300" width="1050"/>
    </div>
<!--    1.2 中部-->
    <div class="content_center">
        <div class="center_top">
            <div class="title"><img src="/libs/datashow/images/icon03.png" /> 地图标题</div>
            <!--这个中间的地图呀-->
            <div class="center_top_con" id="distribution_map">
            </div>
        </div>
        <div class="center_bot">
            <table class="panel-table"bordercolor="#0d48e0" border="1">
                <thead bgcolor="#0e4ae0" align="center" >
                <tr height="40">
                    <th colspan="6"><img src="/libs/datashow/images/icon04.png" /> 这是中间的表格呀</th>
                </tr>
                </thead>
                <tbody>
                <tr class="aaa" align="center">
                    <td v-for="item in factoryHeader" style="color: #00fcff; font-size: 18px; padding: 5px 0;">{{ item.categories }}</td>
                </tr>
                <tr v-for="y in factory.slice(0,6)" class="aaa" style="font-size: 16px;" align="center" >
                    <td>{{ y.company }}</td>
                    <td>{{ y.dtuCnt }}</td>
                    <td>{{ y.plcCnt }}</td>
                    <td>{{ y.dataCnt }}</td>
                    <td>{{ y.alarm }}</td>
                    <td width="250">
                        <button class="b1 click_pop">问题记录</button>
                        <button class="b2 click_pop2">历史数据</button>
                        <button class="b3 click_pop3">组态应用</button>
                    </td>
                </tr>
                </tbody>
            </table>
        </div>
    </div>
<!--    1.3 右侧-->
    <div class="content_right" >
        <div class="report" >
            <div class="report1">
                <p>告警信息</p>
                <small>{{alarm.alarm}}条</small>
            </div>
            <div class="report2">
                <p>故障信息</p>
                <small>{{alarm.fault}} 条</small>
            </div>
        </div>
        <div class="news_report">
            <div class="title"><img src="/libs/datashow/images/icon05.png" /> 告警记录</div>
            <div class="news_list">
                <ul>
                    <li v-for="item in almMsg.slice(0,3)" class="li02">
                        {{ item.msg }}
                    </li>
                </ul>
            </div>
        </div>
        <div class="data_box">
            <div class="title"><img src="/libs/datashow/images/icon06.png" /> 数据记录</div>
            <div class="data_con" id="container4">
            </div>
        </div>
    </div>
</div>

<!--2.1 遮罩层-->
<div class="bgPop"></div>
<!--2.2 弹出框-->
<div class="pop">
    <div class="pop-top">
        报警记录
        <span class="pop-close">Ｘ</span>
    </div>
    <div class="pop-content">
        <table class="panel-table" bordercolor="#deefff" border="1">
            <thead bgcolor="#971212" align="center" >
            <tr height="38">
                <th>字段</th>
                <th>字段</th>
                <th>字段</th>
                <th>字段</th>
                <th>字段</th>
            </tr>
            </thead>
            <tbody>
            <tr class="aaa" style="font-size: 16px;" align="center" >
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
            </tr>
            <tr class="aaa" style="font-size: 16px;" align="center" >
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
            </tr>
            <tr class="aaa" style="font-size: 16px;" align="center" >
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
            </tr>

            <tr class="aaa" style="font-size: 16px;" align="center" >
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
            </tr>
            </tbody>
        </table>
    </div>
    <div class="pop-foot">
        <input type="button" value="确定" class="pop-cancel pop-close">
    </div>
</div>
<script>
    $(document).ready(function () {
        $('.pop-close').click(function () {
            $('.bgPop,.pop').hide();
        });
        $('.click_pop').click(function () {
            $('.bgPop,.pop').show();
        });
    })
</script>
<!--3.1 遮罩层-->
<div class="bgPop2"></div>
<!--3.2 弹出框-->
<div class="pop2">
    <div class="pop-top">
        历史记录
        <span class="pop-close">Ｘ</span>
    </div>
    <div class="pop-content">
        <table class="panel-table" bordercolor="#deefff" border="1">
            <thead bgcolor="#10aaa5" align="center" >
            <tr height="38">
                <th>字段</th>
                <th>字段</th>
                <th>字段</th>
                <th>字段</th>
                <th>字段</th>
            </tr>
            </thead>
            <tbody>
            <tr class="aaa" style="font-size: 16px;" align="center" >
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
            </tr>
            <tr class="aaa" style="font-size: 16px;" align="center" >
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
            </tr>
            <tr class="aaa" style="font-size: 16px;" align="center" >
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
            </tr>

            <tr class="aaa" style="font-size: 16px;" align="center" >
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
            </tr>
            </tbody>
        </table>
    </div>
    <div class="pop-foot">
        <input type="button" value="确定" class="pop-cancel pop-close">
    </div>
</div>
<script>
    $(document).ready(function () {
        $('.pop-close').click(function () {
            $('.bgPop2,.pop2').hide();
        });
        $('.click_pop2').click(function () {
            $('.bgPop2,.pop2').show();
        });
    })

</script>
<!--4.1 遮罩层-->
<div class="bgPop3"></div>
<!--4.2 弹出框-->
<div class="pop3">
    <div class="pop-top">
        组态应用
        <span class="pop-close">Ｘ</span>
    </div>
    <div class="pop-content">
        组态应用
    </div>
    <div class="pop-foot">
        <input type="button" value="确定" class="pop-cancel pop-close">
    </div>
</div>
<script>
    $(document).ready(function () {
        $('.pop-close').click(function () {
            $('.bgPop3,.pop3').hide();
        });
        $('.click_pop3').click(function () {
            $('.bgPop3,.pop3').show();
        });
    })

</script>
<!--todo 先加载完各个js执行 or 每个js加载执行完继续加载下一个js ?-->
<script type="text/javascript" src="/libs/datashow/js/jquery.min.js"></script>
<script type="text/javascript" src="/libs/datashow/js/echarts.min.js"></script>
<script type="text/javascript" src="/libs/datashow/js/china.js"></script>
<script type="text/javascript" src="/libs/datashow/js/vue.min.js"></script>
<script type="text/javascript" src="/libs/datashow/js/map.js"></script>
<script type="text/javascript" src="/libs/datashow/js/times.js"></script>
<script type="text/javascript" src="/libs/datashow/js/DTU.js"></script>
<script type="text/javascript" src="/libs/datashow/js/PLC.js"></script>
<script type="text/javascript" src="/libs/datashow/js/online.js"></script>
<script type="text/javascript" src="/libs/datashow/js/industry.js"></script>
<script type="text/javascript" src="/libs/datashow/js/data.js"></script>
<!-- 数据填充js -->
<!-- <script type="text/javascript" src="/libs/datashow/js/index.js"></script>  -->
<script type="text/javascript" src="/libs/datashow/js/demo_data.js"></script>
<script type="text/javascript" >
<!--    console.log("scn_data: ",scn_data);-->
<!--    console.log("scn_data["industy"]: ",scn_data["industy"]);-->

// 创建VUE
var vm = new Vue({
	el: '#content',
	data: scn_data,
	methods: {
		details: function() {

		}
	}
})
</script>
</body>
</html>
